<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background:rgb(52, 58, 69)">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons"></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">
          {{ $t("navs.assets") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="gBody assets">
      <view class="my">
        <view class="total">
          <view class="pt-10 grace-flex grace-flex-vbottom">
            <view class="cloud-family-din font-48 color-w">
              {{ hideNum ? "******" : assetsTotal.USDT || 0 }}
            </view>
            <view class="cloud-family-psc font-26 color-w coin" v-if="!hideNum"
              >USDT
            </view>
          </view>
          <view class="mt-10 cloud-family-psc font-24 color-w">
            {{ hideNum ? "******" : "≈￥" + (assetsTotal.CNY || 0) }}
          </view>
        </view>
        <view class="mt-15 grace-flex grace-space-between grace-flex-vcenter">
          <view class="cloud-family-psc font-24 color-b2">
            {{ $t("wallet.totalAssetsConverted") }}
          </view>
          <view @tap.stop="handleHideNum">
            <cloudIcon
              :name="hideNum ? 'iconyincang' : 'iconbuyincang'"
              class="color-w"
              style="font-size:36rpx;"
            ></cloudIcon
          ></view>
        </view>
      </view>
      <view class="coins mt-20 cloud-b-w">
        <view class="grace-grids four grace-flex-vcenter">
          <navigator
            hover-class="none"
            url="/pages/wallet/withdraw/index"
            class="items"
          >
            <cloudIcon
              name="icontibi"
              class="color-b2 grace-flex-center"
              style="font-size:80rpx;"
            ></cloudIcon>
            <view class="text cloud-family-psc font-24 color-b3">
              {{ $t("wallet.withdraw") }}
            </view>
          </navigator>
          <navigator
            hover-class="none"
            url="/pages/wallet/recharge/index"
            class="items"
          >
            <cloudIcon
              name="iconchongbi"
              class="color-b2 grace-flex-center"
              style="font-size:80rpx;"
            ></cloudIcon>
            <view class="text cloud-family-psc font-24 color-b3">
              {{ $t("wallet.recharge") }}
            </view>
          </navigator>
          <navigator
            hover-class="none"
            url="/pages/assets/transfer/index"
            class="items"
          >
            <cloudIcon
              name="iconneibuzhuanzhang"
              class="color-b2 grace-flex-center"
              style="font-size:80rpx;"
            ></cloudIcon>
            <view class="text cloud-family-psc font-24 color-b3">
              {{ $t("wallet.internalTransfer") }}
            </view>
          </navigator>
          <navigator
            hover-class="none"
            url="/pages/exchange/convert/index"
            class="items"
          >
            <cloudIcon
              name="iconduihuan"
              class="color-b2 grace-flex-center"
              style="font-size:80rpx;"
            ></cloudIcon>
            <view class="text cloud-family-psc font-24 color-b3">兑换</view>
          </navigator>
        </view>
        <view class="grace-flex b-t-grey1 b-b-grey1">
          <!-- <cloud-speaker
            :interval="3000"
            iconClass="icons grace-flex-center cloudIcons icon-cloud-gonggao font-40 color-w"
            :msgs="getNotices"
          ></cloud-speaker>-->
        </view>
        <view class="grace-flex grace-space-between grace-flex-vcenter mt-50">
          <view class="grace-flex grace-flex-vcenter">
            <checkbox
              class="checkedbox"
              color="#343A45"
              :checked="hideZero"
              @tap="handleHideZero"
            />
            <view class="cloud-family-psc font-24 color-b3">
              {{ $t("wallet.hiddenAssets") }}
            </view>
          </view>
        </view>
        <view class="list mt-30">
          <block v-for="(coin, index) in filteredAssets" :key="index">
            <view
              class="item mt-30 grace-flex grace-flex-vcenter"
              @tap.stop="onNavLogs(coin)"
            >
              <view class="grace-flex1 grace-flex grace-flex-vcenter">
                <image
                  style="width:60rpx; height:60rpx;"
                  :src="'/static/coin-images/' + coin.symbol + '.png'"
                />
                <view
                  class="cloud-family-psc font-29 weight-bold color-b3"
                  style="margin-left: 20rpx;"
                  >{{ coin.symbol }}</view
                >
              </view>
              <view class="grace-flex1 grace-center">
                <view class="cloud-family-psc font-24 color-b3">
                  {{ $t("wallet.presentPrice") }}
                </view>
                <view class="cloud-family-psc font-24 color-b3 mt-10"
                  >￥{{ coin.coin.price.CNY }}</view
                >
              </view>
              <view class="grace-flex1" style="text-align: right;">
                <view class="grace-flex" style="justify-content: flex-end;">
                  <view class="cloud-family-psc font-24 color-b3">
                    {{ hideNum ? "******" : coin.balance }}
                  </view>
                  <view
                    class="cloud-family-psc font-24 color-g9"
                    style="margin-left: 10rpx;"
                    v-if="!hideNum"
                    >{{ coin.symbol }}</view
                  >
                </view>
                <view class="cloud-family-psc font-24 color-g9 mt-10">
                  {{ hideNum ? "******" : "≈￥" + coin.balance_price.CNY }}
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      hideZero: false,
      hideNum: false
    };
  },
  async onShow() {
    this.loadSettings();
    await this.loadUser();
    if (this.hasLogined) this.loadAssets();
  },
  computed: {
    ...mapState(["loading"]),
    ...mapGetters("system", ["settings"]),
    ...mapGetters("asset", ["assets", "assetsTotal"]),
    filteredAssets() {
      let coins = this.settings.default_coin_list || [];
      const hideZero = this.hideZero;
      return this.assets.filter(
        asset =>
          coins.includes(asset.symbol) &&
          (!hideZero || (hideZero && asset.balance > 0))
      );
    }
  },
  methods: {
    ...mapActions("system", ["loadSettings"]),
    ...mapActions("user", ["loadUser"]),
    ...mapActions("asset", ["loadAssets"]),
    handleHideZero() {
      this.hideZero = !this.hideZero;
    },
    handleHideNum() {
      console.log(1);
      this.hideNum = !this.hideNum;
    },
    onNavLogs(coin) {
      this.handleNavTo({
        url: "/pages/wallet/asset/logs/index?symbol=" + coin.symbol
      });
    }
  }
};
</script>

<style scoped>
.assets {
  background: url("~@/static/wallet/assets_bg.png");
  background-size: 755rpx 1209rpx;
  background-repeat: no-repeat;
  width: 750rpx;
}
.assets .total {
  min-height: 120rpx;
}
.assets .my {
  padding: 0rpx 40rpx;
}
.assets .my .coin {
  margin-left: 10rpx;
  margin-bottom: 8rpx;
}
.assets .coins {
  padding: 50rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background-color: #fff;
}
.assets .coins .four .items {
  width: 25%;
  padding: 22rpx 0;
  box-sizing: border-box;
}
.assets .coins .four .items .text {
  line-height: 48rpx;
  text-align: center;
  margin-top: 4rpx;
  font-size: 26rpx;
}

.list .item {
  padding: 25rpx 30rpx;
  box-shadow: 0px 0px 10rpx 0px rgba(51, 51, 51, 0.1);
  border-radius: 10rpx;
}
</style>
